<style>
</style>
<html>
	<head>
		<title>Facebook Design</title>
		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
		<link href="/css/default.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
	<div class="container">
		<div class="floatleft">
			<div class="invite_box">
				<input type="text" id="search" name="search" placeholder="Enter Name...">
			</div>
			<div class="clearfix"></div>
			<div id="friend_list">
			<div class="mar_t10 invite_friend">
				<ul class="overflow_box">
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<div class="invite-btn" >
							<a class="zs-invite-fb-btn btn mar_t10 float_r"  href="#" >Invite</a>
						</div>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajayn magham</a>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<div class="invite-btn">
							<a class=" zs-invite-fb-btn btn mar_t10 float_r"  href="#">Invite</a>
						</div>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajaynj magham</a>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<div class="invite-btn">
							<a class=" zs-invite-fb-btn btn mar_t10 float_r"  href="#">Invite</a>
						</div>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<div class="invite-btn">
							<a class=" zs-invite-fb-btn btn mar_t10 float_r"  href="#">Invite</a>
						</div>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<div class="invite-btn">
							<a class=" zs-invite-fb-btn btn mar_t10 float_r"  href="#">Invite</a>
						</div>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<div class="invite-btn">
							<a class=" zs-invite-fb-btn btn mar_t10 float_r"  href="#">Invite</a>
						</div>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<div class="invite-btn">
							<a class=" zs-invite-fb-btn btn mar_t10 float_r"  href="#">Invite</a>
						</div>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<div class="invite-btn">
							<a class=" zs-invite-fb-btn btn mar_t10 float_r"  href="#">Invite</a>
						</div>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<div class="invite-btn">
							<a class=" zs-invite-fb-btn btn mar_t10 float_r"  href="#">Invite</a>
						</div>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<div class="invite-btn">
							<a class=" zs-invite-fb-btn btn mar_t10 float_r"  href="#">Invite</a>
						</div>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<div class="invite-btn">
							<a class=" zs-invite-fb-btn btn mar_t10 float_r"  href="#">Invite</a>
						</div>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<div class="invite-btn">
							<a class=" zs-invite-fb-btn btn mar_t10 float_r"  href="#">Invite</a>
						</div>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<div class="invite-btn">
							<a class=" zs-invite-fb-btn btn mar_t10 float_r"  href="#">Invite</a>
						</div>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<div class="invite-btn">
							<a class=" zs-invite-fb-btn btn mar_t10 float_r"  href="#">Invite</a>
						</div>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<div class="invite-btn">
							<a class=" zs-invite-fb-btn btn mar_t10 float_r"  href="#">Invite</a>
						</div>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
						</div>
					</li>

				</ul>
			</div>
		</div>
		</div>
		

		<div class="floatleft2 invite_friend">
			<div class="right">
				<a class="btn zs-follow-all-google-btn">Follow all</a>
			</div>
			<h2 class="page-heading" style="display: inline;"><span class="red">5</span>friends on Freshenme</h2>
			<div class="clearfix"></div>
			<ul class="">
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						
							<!--<a class="zs-invite-fb-btn btn mar_t10 float_r"  href="#" >Invite</a>-->
							<a class="zs-follow-user-button mar_t10 float_r" href="#">+</a>
						
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
							<a class="user-rank-label" title="ajay magham"  target="_BLANK" href="#">Foodie</a>
							<span class="at">
							0 Reviews /
							<span class="zs-user-follower " title="0 Followers" data-user-id="1310653">
							<span class="zs-user-follower-count" data-user-id="1310653">0</span>
							<span class="zs-user-follower-text" data-user-id="1310653"> Followers</span>
							</span>
							</span>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<a class="zs-follow-user-button mar_t10 float_r" href="#">+</a>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
							<a class="user-rank-label" title="ajay magham"  target="_BLANK" href="#">Foodie</a>
							<span class="at">
							0 Reviews /
							<span class="zs-user-follower " title="0 Followers" data-user-id="1310653">
							<span class="zs-user-follower-count" data-user-id="1310653">0</span>
							<span class="zs-user-follower-text" data-user-id="1310653"> Followers</span>
							</span>
							</span>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<a class="zs-follow-user-button mar_t10 float_r" href="#">+</a>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
							<a class="user-rank-label" title="ajay magham"  target="_BLANK" href="#">Foodie</a>
							<span class="at">
							0 Reviews /
							<span class="zs-user-follower " title="0 Followers" data-user-id="1310653">
							<span class="zs-user-follower-count" data-user-id="1310653">0</span>
							<span class="zs-user-follower-text" data-user-id="1310653"> Followers</span>
							</span>
							</span>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<a class="zs-follow-user-button mar_t10 float_r" href="#">+</a>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
							<a class="user-rank-label" title="ajay magham"  target="_BLANK" href="#">Foodie</a>
							<span class="at">
							0 Reviews /
							<span class="zs-user-follower " title="0 Followers" data-user-id="1310653">
							<span class="zs-user-follower-count" data-user-id="1310653">0</span>
							<span class="zs-user-follower-text" data-user-id="1310653"> Followers</span>
							</span>
							</span>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<a class="zs-follow-user-button mar_t10 float_r" href="#">+</a>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
							<a class="user-rank-label" title="ajay magham"  target="_BLANK" href="#">Foodie</a>
							<span class="at">
							0 Reviews /
							<span class="zs-user-follower " title="0 Followers" data-user-id="1310653">
							<span class="zs-user-follower-count" data-user-id="1310653">0</span>
							<span class="zs-user-follower-text" data-user-id="1310653"> Followers</span>
							</span>
							</span>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<a class="zs-follow-user-button mar_t10 float_r" href="#">+</a>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
							<a class="user-rank-label" title="ajay magham"  target="_BLANK" href="#">Foodie</a>
							<span class="at">
							0 Reviews /
							<span class="zs-user-follower " title="0 Followers" data-user-id="1310653">
							<span class="zs-user-follower-count" data-user-id="1310653">0</span>
							<span class="zs-user-follower-text" data-user-id="1310653"> Followers</span>
							</span>
							</span>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<a class="zs-follow-user-button mar_t10 float_r" href="#">+</a>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
							<a class="user-rank-label" title="ajay magham"  target="_BLANK" href="#">Foodie</a>
							<span class="at">
							0 Reviews /
							<span class="zs-user-follower " title="0 Followers" data-user-id="1310653">
							<span class="zs-user-follower-count" data-user-id="1310653">0</span>
							<span class="zs-user-follower-text" data-user-id="1310653"> Followers</span>
							</span>
							</span>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
							<a class="zs-follow-user-button mar_t10 float_r" href="#">+</a>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
							<a class="user-rank-label" title="ajay magham"  target="_BLANK" href="#">Foodie</a>
							<span class="at">
							0 Reviews /
							<span class="zs-user-follower " title="0 Followers" data-user-id="1310653">
							<span class="zs-user-follower-count" data-user-id="1310653">0</span>
							<span class="zs-user-follower-text" data-user-id="1310653"> Followers</span>
							</span>
							</span>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<a class="zs-follow-user-button mar_t10 float_r" href="#">+</a>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
							<a class="user-rank-label" title="ajay magham"  target="_BLANK" href="#">Foodie</a>
							<span class="at">
							0 Reviews /
							<span class="zs-user-follower " title="0 Followers" data-user-id="1310653">
							<span class="zs-user-follower-count" data-user-id="1310653">0</span>
							<span class="zs-user-follower-text" data-user-id="1310653"> Followers</span>
							</span>
							</span>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<a class="zs-follow-user-button mar_t10 float_r" href="#">+</a>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
							<a class="user-rank-label" title="ajay magham"  target="_BLANK" href="#">Foodie</a>
							<span class="at">
							0 Reviews /
							<span class="zs-user-follower " title="0 Followers" data-user-id="1310653">
							<span class="zs-user-follower-count" data-user-id="1310653">0</span>
							<span class="zs-user-follower-text" data-user-id="1310653"> Followers</span>
							</span>
							</span>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<a class="zs-follow-user-button mar_t10 float_r" href="#">+</a>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
							<a class="user-rank-label" title="ajay magham"  target="_BLANK" href="#">Foodie</a>
							<span class="at">
							0 Reviews /
							<span class="zs-user-follower " title="0 Followers" data-user-id="1310653">
							<span class="zs-user-follower-count" data-user-id="1310653">0</span>
							<span class="zs-user-follower-text" data-user-id="1310653"> Followers</span>
							</span>
							</span>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<a class="zs-follow-user-button mar_t10 float_r" href="#">+</a>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
							<a class="user-rank-label" title="ajay magham"  target="_BLANK" href="#">Foodie</a>
							<span class="at">
							0 Reviews /
							<span class="zs-user-follower " title="0 Followers" data-user-id="1310653">
							<span class="zs-user-follower-count" data-user-id="1310653">0</span>
							<span class="zs-user-follower-text" data-user-id="1310653"> Followers</span>
							</span>
							</span>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
							<a class="zs-follow-user-button mar_t10 float_r" href="#">+</a>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
							<a class="user-rank-label" title="ajay magham"  target="_BLANK" href="#">Foodie</a>
							<span class="at">
							0 Reviews /
							<span class="zs-user-follower " title="0 Followers" data-user-id="1310653">
							<span class="zs-user-follower-count" data-user-id="1310653">0</span>
							<span class="zs-user-follower-text" data-user-id="1310653"> Followers</span>
							</span>
							</span>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
						<a class="zs-follow-user-button mar_t10 float_r" href="#">+</a>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
							<a class="user-rank-label" title="ajay magham"  target="_BLANK" href="#">Foodie</a>
							<span class="at">
								0 Reviews /
								<span class="zs-user-follower " title="0 Followers" data-user-id="1310653">
								<span class="zs-user-follower-count" data-user-id="1310653">0</span>
								<span class="zs-user-follower-text" data-user-id="1310653"> Followers</span>
								</span>
								</span>
						</div>
					</li>
					<div class="clearfix"></div>
					<li>
						<a target="_BLANK" href="#" class="float_l">
							<img class="zs-fb-thumb" src="images/default_avatar_50.png">
						</a>
							<span id="follow" name="follow"><a class="zs-follow-user-button mar_t10 float_r"  href="#" title="Follow">+</a></span>
						<div class="product">
							<a title="ajay magham"  target="_BLANK" href="#">ajay magham</a>
							<a class="user-rank-label" title="ajay magham"  target="_BLANK" href="#">Foodie</a>
							<span class="at">
							0 Reviews /
							<span class="zs-user-follower " title="0 Followers" data-user-id="1310653">
							<span class="zs-user-follower-count" data-user-id="1310653">0</span>
							<span class="zs-user-follower-text" data-user-id="1310653"> Followers</span>
							</span>
							</span>
						</div>
					</li>

				</ul>
		</div>
		<div class="clearfix"></div>
	</div>
	</body>
</html>
<style>
  .tooltip {
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 5px solid black !important;
    font-size:12px;
    height:100%;
    width:100%;
    padding:5%;
    color:#eee;
  }
</style>
<div id="demo">
  <img src="image1.jpg" title=""/>
  <img src="image2.jpg" title="The tooltip text #2"/>
  <img src="image3.jpg" title="The tooltip text #3"/>
  <img src="image4.jpg" title="The tooltip text #4"/>
</div>
<script>
  $("#follow a[title]").tooltip();
$(document).ready(function () {
	$('#search').keyup(function(event) {
		var search_text = $('#search').val();
		var rg = new RegExp(search_text,'i');
		$('#friend_list .invite_friend .product').each(function(){
 			if($.trim($(this).html()).search(rg) == -1) {
				$(this).parent().css('display', 'none');
 				$(this).css('display', 'none');
				$(this).next().css('display', 'none');
				$(this).next().next().css('display', 'none');
			}	
			else {
				$(this).parent().css('display', '');
				$(this).css('display', '');
				$(this).next().css('display', '');
				$(this).next().next().css('display', '');
			}
		});
	});
});
 
$('#search_clear').click(function() {
	$('#search').val('');	
 
	$('#product_list .product-list .product').each(function(){
		$(this).parent().css('display', '');
		$(this).css('display', '');
		$(this).next().css('display', '');
		$(this).next().next().css('display', '');
	});
});
</script>
